<template>
  <div>
    <slot></slot>
  </div>
</template>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
} from 'vue'

onBeforeMount(() => {
  console.log('组件被即将挂载前')
})

onMounted(() => {
  console.log('组件挂载完成')
})

onBeforeUpdate(() => {
  console.log('组件即将更新前')
})

onUpdated(() => {
  console.log('组件更新完成')
})

onBeforeUnmount(() => {
  console.log('组件即将被卸载前调用')
})

onUnmounted(() => {
  console.log('组件被卸载后调用')
})

onErrorCaptured((error, instance, info) => {
  console.log('捕获到来自子组件的异常时调用')
})

onRenderTracked(event => {
  console.log('虚拟DOM重新渲染时调用')
})

onRenderTriggered(event => {
  console.log('虚拟DOM被触发渲染时调用')
})
</script>
